<template>
	<view class="page-cont">
		<button style="background-color: #c60000" @click="back()">放弃修改并返回</button>
		<view class="container">
			<!-- <uni-card :is-shadow="false" is-full>
				<text class="uni-h6">文件选择上传组件</text>
			</uni-card> -->
			<uni-section title="记忆永存" type="line">
				<image :src="picInfos.url"></image>
		
			</uni-section>
			
			
			<uni-section title="图片信息" type="line">
				<view class="example">
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="picInfoForm" :model="picInfos" labelWidth="80px" :label-position="alignment">
						<uni-forms-item label="故事">
							<uni-easyinput type="textarea" v-model="picInfos.description" placeholder="讲讲这张图片的故事吧!" />
						</uni-forms-item>
						<uni-forms-item label="日期时间">
							<uni-datetime-picker type="datetime" return-type="timestamp"
								v-model="picInfos.time" />
						</uni-forms-item>
						<uni-forms-item label="人生阶段">
							<uni-data-picker v-model="picInfos.stage_name" :localdata="stageNames" popup-title="请选择这张图片所属的人生阶段">
							</uni-data-picker>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-section>
				<button @click="complete()">提交修改</button>
			
			
			
		</view>
		
		
	</view>
	
	
</template>

<script>
	import {server_url} from '@/web_config/config.js'
	import {formatTimestamp} from '@/utils/time-util.js'
	
	
	export default {
		data() {
			return {
				alignment: 'top',
				sourceType: ['album', 'camera'],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'green',
						style: 'dashed',
						radius: 2
					}
				},
				picInfos:{
					img_id:0,
					description:"",
					stage_name:"现在",
					time:"",
					url:""
				},
				stageNames: [{
					text: "童年",
					value: "童年",
				}, 
				{
					text: "少年",
					value: "少年",
				}, 
				{
					text: "成年",
					value: "成年",
				}, 
				{
					text: "现在",
					value: "现在",
				}],
				fileLists: [{
					url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}]
			}
		},
		onLoad(options) {
			console.log("load好")
			console.log(options.time)
			console.log(options.description)
			this.picInfos.description = options.description;
			this.picInfos.img_id = options.id;
			this.picInfos.time = options.time;
			this.picInfos.stage_name = options.stage_name;
			this.picInfos.url = options.url;
		},
		mounted() {
			console.log("加载好");
			
				
		},
		methods: {
			select(e){
				console.log('选择文件：',e)
				console.log("文件"+ e.tempFiles[0]);
			
				uni.uploadFile({
							url: server_url + '/upload/image', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// console.log(data.id);
								// console.log(uploadFileRes.data);
								this.picInfos.img_id = data.id;
								// console.log("这里"+this.picInfos.img_id)
							}
						});
				
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			
			uploadImages(){
				this.$refs.files.upload()
			},
			updatePicInfo(){
				
				fetch(server_url + '/memory', {
				            method: 'PUT',
				            headers: {
				                'Content-Type': 'application/json'
				            },
				            body: JSON.stringify({
				                img_id:this.picInfos.img_id,
				                description:this.picInfos.description,
				                stage_name:this.picInfos.stage_name,
								time:formatTimestamp(this.picInfos.time),
				            })
				        })
				            .then(response => response.json())
				            .then(data => {
				                    console.log(data);
				                    console.log(data.reply);
				                }
				            );
							

			},
			submit(ref) {
				console.log(this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			back(){
				uni.navigateBack();
			},
			complete(){
				this.updatePicInfo();
				this.back();
			}
		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>
